<template>
  <div>
    <Table :data="priceData" :columns="priceColumn" width="602"></Table>
    <div style="margin-top: 10px;">
      <Form inline v-show="showAdd">
        <FormItem label="结束区间" :label-width="70">
          <InputNumber v-model="addInterval" :min="addMinInterval"/>
        </FormItem>
        <FormItem label="金额" :label-width="40">
          <InputNumber v-model="addPrice" :min="0"/>
        </FormItem>
        <FormItem :label-width="0">
          <Button type="primary" @click="addIntervalSub">添加</Button>
          <Button @click="showAdd = false">取消</Button>
        </FormItem>
      </Form>
      <Button type="primary" @click="showAdd = true" v-show="!showAdd">添加区间</Button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'price-postage',
  data () {
    return {
      url: {
        list: '/branch/interval/postage/setting/list',
        add: '/branch/interval/postage/setting/add',
        update: '/branch/interval/postage/setting/update'
      },
      priceData: [],
      priceColumn: [
        {
          title: '开始区间',
          width: 100,
          key: 'beginPaymentInterval',
          render: (h, params) => {
            return h('span', params.row.beginPaymentInterval / 100 + '￥')
          }
        },
        {
          title: '结束区间',
          width: 100,
          key: 'endPaymentInterval',
          render: (h, params) => {
            let endPaymentInterval = this.priceData[params.index - 1] ? this.priceData[params.index - 1].endPaymentInterval : this.priceData[params.index].beginPaymentInterval
            return h('span', params.index === this.priceData.length - 1 ? '大于' + endPaymentInterval / 100 + '￥' : params.row.endPaymentInterval / 100 + '￥')
          }
        },
        {
          title: ' ',
          width: 100,
          render: (h, params) => {
            if (params.index !== this.priceData.length - 1) {
              return h('Poptip', {
                props: {
                  placement: 'top',
                  width: 200
                },
                on: {
                  'on-popper-hide': () => {
                    this.cancelHide(params.index)
                  }
                }
              }, [
                h('Button', {
                  props: {
                    size: 'small',
                    type: 'primary'
                  }
                }, '修改区间'),
                h('div', {
                  slot: 'content'
                }, [
                  h('InputNumber', {
                    props: {
                      min: 0,
                      max: this.priceData[params.index + 1].endPaymentInterval / 100 - 1,
                      value: this.price[params.index]
                    },
                    on: {
                      input: (e) => {
                        this.price[params.index] = e
                      }
                    }
                  }),
                  h('Button', {
                    props: {
                      size: 'small',
                      type: 'primary'
                    },
                    style: {
                      marginLeft: '6px'
                    },
                    on: {
                      click: () => {
                        this.addPostage(params.index)
                      }
                    }
                  }, '确定')
                ])
              ])
            }
          }
        },
        {
          title: '金额',
          width: 100,
          key: 'postage',
          render: (h, params) => {
            return h('span', params.row.postage / 100 + '￥')
          }
        },
        {
          title: ' ',
          width: 100,
          render: (h, params) => {
            return h('Poptip', {
              props: {
                placement: 'top',
                width: 200
              }
            }, [
              h('Button', {
                props: {
                  size: 'small',
                  type: 'primary'
                }
              }, '修改金额'),
              h('div', {
                slot: 'content'
              }, [
                h('InputNumber', {
                  props: {
                    min: 0,
                    value: this.postage[params.index]
                  },
                  on: {
                    input: (e) => {
                      this.postage[params.index] = e
                    }
                  }
                }),
                h('Button', {
                  props: {
                    size: 'small',
                    type: 'primary'
                  },
                  style: {
                    marginLeft: '6px'
                  },
                  on: {
                    click: () => {
                      this.updatePostage(params.index)
                    }
                  }
                }, '确定')
              ])
            ])
          }
        },
        {
          title: '删除',
          width: 100,
          render: (h, params) => {
            if (params.index !== this.priceData.length - 1 && params.index !== 0) {
              return h('Poptip', {
                props: {
                  confirm: true,
                  title: '确定删除吗?'
                },
                on: {
                  'on-ok': () => {
                    this.deleteInterval(params.index)
                  }
                }
              }, [
                h('Button', {
                  props: {
                    size: 'small',
                    type: 'error'
                  }
                }, '删除区间')
              ])
            }
          }
        }
      ],
      postage: [],
      price: [],
      addInterval: null,
      addPrice: null,
      addMinInterval: null,
      showAdd: false
    }
  },
  methods: {
    updatePostage (index) {
      if (this.postage[index] === this.priceData[index].postage / 100) {
        return
      }
      let params = {
        intervalId: this.priceData[index].id,
        postage: this.postage[index] * 100
      }
      this.$ajax.post(this.url.update, params)
        .then(res => {
          if (res.data.success) {
            this.initList()
            this.$Message.success('修改成功')
          }
        })
    },
    addPostage (index) {
      if (this.price[index] === this.priceData[index].endPaymentInterval / 100) {
        return
      }
      let interval = []
      this.price.forEach(item => {
        interval.push(item * 100)
      })
      let maxLimit = this.postage[this.postage.length - 1] * 100
      let postage = []
      this.postage.forEach((item, index) => {
        if (index !== postage.length - 1) {
          postage.push(item * 100)
        }
      })
      let params = {
        maxLimit,
        interval,
        postage
      }
      this.$ajax.post(this.url.add, params)
        .then(res => {
          if (res.data.success) {
            this.initList()
            this.$Message.success('修改成功')
          }
        })
    },
    cancelHide (index) {
      this.price[index] = this.priceData[index].endPaymentInterval / 100
    },
    deleteInterval (index) {
      let maxLimit = this.postage.splice(-1, 1)[0] * 100
      let interval = []
      let postage = []
      this.price.forEach((item, i) => {
        if (i !== index) {
          interval.push(item * 100)
          postage.push(this.postage[i] * 100)
        }
      })
      let params = {
        maxLimit,
        interval,
        postage
      }
      this.$ajax.post(this.url.add, params)
        .then(res => {
          if (res.data.success) {
            this.initList()
            this.$Message.success('删除成功')
          }
        })
    },
    addIntervalSub () {
      if ((this.addInterval !== null || this.addPrice !== null) && (!this.price[this.price.length - 1] || this.price[this.price.length - 1] < this.addInterval)) {
        this.price.push(this.addInterval)
        let interval = []
        this.price.forEach(item => {
          interval.push(item * 100)
        })
        let postage = []
        this.postage.forEach(item => {
          postage.push(item * 100)
        })
        let maxLimit = this.addPrice * 100
        let params = {
          interval,
          postage,
          maxLimit
        }
        this.$ajax.post(this.url.add, params)
          .then(res => {
            if (res.data.success) {
              this.showAdd = false
              this.initList()
            }
          })
      } else {
        this.$Message.error('您的输入有误')
      }
    },
    initList () {
      this.postage = []
      this.price = []
      this.$ajax.post(this.url.list).then(res => {
        if (res.data.success) {
          this.priceData = res.data.data
          this.addMinInterval = this.priceData[this.priceData.length - 1].beginPaymentInterval / 100 + 1
          res.data.data.forEach((item, index) => {
            this.postage.push(item.postage / 100)
            if (index !== res.data.data.length - 1) {
              this.price.push(item.endPaymentInterval / 100)
            }
          })
        }
      })
    }
  },
  created () {
    this.initList()
  }
}
</script>

<style scoped>
  .price li{
    margin-bottom: 16px;
  }
  .show li{
    height: 40px;
  }
  .none{
    display: none;
  }
  .price li:hover .none{
    display: inline-block;
  }
</style>
